<template>
   <div class="CampusInformation">
      <myHead title="二手订单"></myHead>
      <div class="fenG"></div>
      <div class="content">
         <div class="header">
            <div class="headerBox" v-for="(x,y) in typeTit" @click="type(y)">
               <p :class="typeIndex == y?'showTyped showType':'showType'">{{x.text}}</p>
               <transition name="el-zoom-in-center">
                  <p v-show="y == typeIndex"></p>
               </transition>
            </div>
         </div>
         <!-- 空订单状态 -->
         <div class="empty" :style="{minHeight:$store.state.minHeight-1.1+'rem'}" v-show="list.length<1">
            <img src="../../../static/img/orderNo.png" alt="">
            <p>暂无此类型订单</p>
         </div>

         <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功" v-show="list.length>=1">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
               <div class="order-Wrap">
                  <van-cell v-for="item in list" :key="item" >
                     <!-- 订单 -->
                     <div class="order-item">
                        <div class="order-item-tit">
                           <p>订单号:2020191016778888666</p>
                           <p>已结算</p>
                        </div>
                        <div class="order-box">
                           <div class="order-box-top">
                              <div class="order-box-left">
                                 <img src="../../../static/img/shop1.png" alt="">
                              </div>
                              <div class="order-box-right">
                                 <div class="order-box-r-tit">
                                    <p>周末特惠套餐香锅冒菜套餐香锅冒菜套餐香锅冒菜</p>
                                    <p>￥199</p>
                                 </div>
                                 <div class="order-box-r-time">
                                    <p>黑色 XL</p>
                                    <p><span>x</span>1</p>
                                 </div>
                              </div>
                           </div>
                           <div class="order-box-bot">
                              <p style="font-size: .13rem">共1件商品 合计:<span style="font-size: .12rem">￥</span><span style="font-size: .15rem">199</span></p>
                              <div class="order-box-btn">
                                 <p class="lookDetails" @click="lookDetails">查看详情</p>
                                 <p class="qx-order">去付款</p>
                              </div>
                           </div>

                        </div>
                     </div>
                  </van-cell>
               </div>
            </van-list>
         </van-pull-refresh>
      </div>


   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead";
    export default {
        name: "twoHandsOrderList",
        components:{
            myHead
        },
        data(){
            return {
                typeTit:[{text:'全部'},{text:'代付款'},{text:'代发货'},{text:'待收货'},{text:'已完成'}],
                data:[{list:[]},{list:[]}],
                list:[1],
                loading: false,
                finished: false,
                refreshing: false,
                typeIndex:0
            }
        },
        methods:{
            onLoad() {
                setTimeout(() => {
                    if (this.refreshing) {
                        this.list = [];
                        this.refreshing = false;
                    }

                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }
                    this.loading = false;

                    if (this.list.length >= 40) {
                        this.finished = true;
                    }
                }, 1000);
            },
            onRefresh() {
                // 清空列表数据
                this.finished = false;

                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
            },
            // 切换type
            type(index){
                this.typeIndex = index;
            },
            jump(page){
                this.$router.push({
                    name:page
                })
            },
            lookDetails(){
                this.$router.push({
                    name:'twoHandsOrderDetails'
                })
            }
        }
    }
</script>

<style scoped>
   .CampusInformation {
      padding-top: 1rem;
   }
   .header {
      position: fixed;
      top: .5rem;
      left: 0;
      z-index: 99;
      background-color: #FFFFFF;
      height: .5rem;
      width: 3.75rem;
      white-space: nowrap;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }
   .header::-webkit-scrollbar {
      display: none;
   }
   .headerBox {
      width: 20%;
      height: 100%;
      position: relative;
      display: flex;
      flex-flow: column;
      align-items: center;
   }
   .headerBox>p:nth-child(2) {
      width: 70%;
      position: absolute;
      bottom: .05rem;
      height: .02rem;
      background-color: #FF8C3D;
   }
   .showType {
      height: .4rem;
      line-height: .4rem;
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:bold;
      color: #333333;
   }
   .showTyped {
      color: #FF8C3D;
   }

   .order-Wrap {
      background-color: #F5F5F5;
   }
   .order-item {
      padding: 0 .12rem 0;
      background-color: #FFFFFF;
   }
   .order-item-tit {
      height: .4rem;
      box-sizing: border-box;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      border-bottom: .01rem solid #E2E2E2;
      margin-bottom: .1rem;
   }
   .order-item-tit>p {
      height: 100%;
      line-height: .4rem;
   }
   .order-item-tit>p:nth-child(1) {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #333333;
   }
   .order-item-tit>p:nth-child(2) {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #FF7002;
   }
   .order-box-top {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }
   .order-box-btn {
      height: .6rem;
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .order-box-btn>p {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:400;
      height: .29rem;
      line-height: .29rem;
      text-align: center;
      padding: 0 .1rem;
      margin-left: .1rem;
      border-radius: .15rem;
      box-sizing: border-box;
   }
   .order-box-left {
      width: .65rem;
      height: .65rem;
      padding-right: .1rem;
      border-radius: .03rem;
   }
   .order-box-left>img {
      width: 100%;
      height: 100%;
   }
   .order-box-right {
      width: calc(100% - .65rem);
      height: .65rem;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
   }
   .order-box-r-tit {
      display: flex;
      flex-flow: row;
      align-items: flex-start;
      justify-content: space-between;
   }
   .order-box-r-tit>p {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:400;
      color:rgba(51,51,51,1);
      line-height:.18rem;
   }
   .order-box-r-tit>p:nth-child(1){
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
   }

   .order-box-r-time {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }
   .order-box-r-time>p {
      line-height: .2rem;
      font-size:.14rem;
      font-family:PingFang SC;
      color: #999999;
   }
   .order-box-bot {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }
   .order-box-bot>p {
      font-family:PingFang SC;
      font-weight:400;
      color: #333333;
   }
   .lookDetails {
      border:.01rem solid rgba(255,112,2,1);
      color: #FF7002;
   }
   .qx-order {
      background:rgba(255,112,2,1);
      color: #FFFFFF;
   }
   .fenG {
      width: 100%;
      height: .1rem;
      background-color: #F5F5F5;
   }
   .empty {
      background-color: #F5F5F5;
      display: flex;
      flex-flow: column;
      align-items: center;
      box-sizing: border-box;
      padding-top: .3rem;
   }
   .empty>p {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #999999;
   }
   .empty>img {
      width: 1.62rem;
      max-height: 1.26rem;
      margin-bottom: .2rem;
   }


   /* 懒加载适配 */
   >>> .van-cell {
      padding: 0;
      line-height: 0;
      font-size: 0;
   }
   >>> .van-list__loading {
      font-size: .14rem;
      line-height: .5rem;
   }
   >>> .van-loading__spinner--circular{
      width: .16rem;
      height: .16rem;
   }
   >>> .van-loading__text {
      font-size: .14rem;
      margin-left: .08rem;
   }
   >>> .van-cell:not(:last-child)::after {
      border-bottom: none;
   }
   >>> .van-cell {
      margin-bottom: .1rem;
   }

   /* 订单状态 */
   /* 已结算 */
   .state {
      color: #FF7002 !important;
   }
   /* 已下单 */
   .state1 {
      color: #FF1010 !important;
   }

</style>
